<template>
	<view class="activity-detail-container">
		<!-- Banner -->
		<view class="banner-wrapper">
			<image :src="act.gameInfo[0].picture" mode="widthFix"></image>
			<view>{{ act.title }}</view>
		</view>
		<!-- 主办方 -->
		<view class="sponsor-wrapper">
			<image :src="act.userVo.avatarUrl" class="app-avatar"></image>
			<view class="nickname">{{ act.userVo.nickname }}</view>
			<u-tag text="主办" plain shape="circle" :color="themeColor" :border-color="themeColor" size="mini"></u-tag>
		</view>

		<view class="tab-wrapper">
			<u-subsection :list="tabList" :current="currentTab" :activeColor="themeColor"
				@change="changeTab"></u-subsection>
		</view>

		<view v-if="currentTab === 0">
			<!-- 活动详情 -->
			<view class="activity-detail-wrapper">
				<view class="detail-item">
					<image src="@/static/activity/time.png" />
					<view>{{ act.date }} {{ act.time }}</view>
				</view>
				<view class="detail-item">
					<image src="@/static/activity/location.png" />
					<view>{{ act.locationName }}</view>
				</view>
				<view class="detail-item">
					<image src="@/static/activity/players.png" />
					<view class="player-wrap">
						<view class="player-info">
							<view class="player-count">{{ act.participantVoList ? act.participantVoList.length + 1 : 0
							}}/{{ act.peopNum }}人</view>
							<view class="player-less">剩余{{ act.participantVoList ? act.peopNum -
								act.participantVoList.length - 1 : act.peopNum }}位</view>
						</view>
						<u-line-progress
							:percentage="act.participantVoList ? ((act.participantVoList.length + 1) / act.peopNum) * 100 : 0"
							:height="8" :activeColor="themeColor" :showText="false"></u-line-progress>
					</view>
				</view>
				<view class="detail-item">
					<image src="@/static/activity/game.png" />
					<view>{{ act.games }}</view>
				</view>
				<view class="detail-item">
					<image src="@/static/activity/map.png" />
					<view>主办电话：{{ act.userVo.phone }}</view>
				</view>
			</view>
			<!-- 参与者 -->
			<view class="players-wrapper">
				<view class="players-title">参与者({{ act.participantVoList ? act.participantVoList.length : 0 }}/{{
					act.peopNum - 1 }})</view>
				<view class="players-list">
					<image v-for="item in act.participantVoList" :key="item.id" :src="item.user.avatarUrl"
						class="app-avatar"></image>
					<!-- <view class="more">
					<u-icon name="arrow-right"></u-icon>
				</view> -->
				</view>
			</view>
			<!-- 活动介绍 -->
			<view class="activity-intro-wrapper">
				<view class="activity-intro-title">活动介绍</view>
				<view class="activity-intro-content">{{ act.content }}</view>
			</view>
			<!-- 活动地点 -->
			<view class="activity-location-wrapper">
				<view class="activity-location-title">活动地点</view>
				<view class="activity-location-map">
					<map :longitude="longitude" :latitude="latitude" :markers="markerList" class="map" />
				</view>
				<view class="activity-location-address">
					<view>{{ act.locationName }}</view>
					<image src="@/static/copy.png" />
				</view>

				<!-- 加入 -->
				<view v-if="status == '未开始' || status == '进行中'" class="join-button">
					<u-button v-if="act.isJoined" color="#f56c6c" @click="handleExit">退出</u-button>
					<u-button v-else :color="themeColor" @click="handleJoin">加入</u-button>
				</view>
				<view v-else class="join-button">
					<u-button color="#909399">已结束</u-button>
				</view>
			</view>
		</view>
		<!-- 活动评论 -->
		<view v-else class="activity-comment-wrapper">
			<!-- 一键生成桌游战报 -->
			<view class="generate-report-wrapper">
				<u-button v-if="!generating" :color="themeColor" @click="handleGenerateReport">一键生成桌游战报</u-button>
				<view v-else style="opacity: 0.8">
					<u-button :color="themeColor" loading text="生成中..."></u-button>
				</view>
			</view>
			<u-popup :show="boardgameReport" mode="center" :round="8" :safeAreaInsetBottom="false" @close="boardgameReport = null">
				<view class="boardgame-report-message">
					<view class="message-title">🎉桌游战报生成完毕🎉</view>
					<u-button type="primary" :color="themeColor" @click="handleGoToReport">前往查看</u-button>
				</view>
			</u-popup>
			<!-- 评论区 -->
			<CommentArea class="comment-area" v-show="currentTab == 1" :post="act" :commentList="commentList"
				:userData="userData" @submitComment="handleSubmitComment" @like="handleLike" @collect="handleCollect"
				@delete="handleDelete" />
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';
import CommentArea from '@/components/CommentArea/CommentArea.vue';

export default {
	components: {
		CommentArea
	},
	data() {
		return {
			longitude: 116.404,
			latitude: 39.915,
			markerList: [
				{
					id: 1,
					latitude: 39.915,
					longitude: 116.404,
					iconPath: require('@/static/activity/marker.png'),
					width: 30,
					height: 30
				}
			],
			act: {},
			userData: {},
			status: '未开始',
			tabList: ['活动', '讨论'],
			currentTab: 0,
			commentList: [],
			generating: false, // 是否正在生成桌游战报
			boardgameReport: null, // 生成的桌游战报
		};
	},
	onLoad(options) {
		let { id } = options;
		this.id = id;
		this.handleInit();
	},
	methods: {
		handleInit() {
			this.getActivityDetail(this.id);
			this.getUserData();
			this.getComment();
		},
		// 异步获取用户数据
		async getUserData() {
			// 发送请求，获取用户数据
			const res = await request(`/user/getUserData`);
			// 将获取到的数据赋值给userData
			this.userData = res.data;
		},
		async getComment() {
			// 获取评论
			let res = await request(`/comments/get?type=${2}&postId=${this.id}`);
			this.commentList = [...res.data];
		},
		async getActivityDetail(id) {
			let res = await request(`/activities/queryActivity?id=${id}`);
			let act = res.data;
			act.date = this.timeCalc(act.startTime);
			act.time = act.startTime.split(' ')[1] + '-' + act.endTime.split(' ')[1];
			act.games = act.gameInfo.map((item) => item.name).join('、');
			this.act = act;
			this.markerList[0].latitude = act.latitude;
			this.markerList[0].longitude = act.longitude;
			this.latitude = act.latitude;
			this.longitude = act.longitude;
			if (new Date(act.startTime) > new Date()) {
				this.status = '未开始';
			} else if (new Date(act.endTime) < new Date()) {
				this.status = '已结束';
			} else {
				this.status = '进行中';
			}
		},
		timeCalc(time) {
			// 今天、明天、后天、月份-日期
			const today = new Date();
			const targetDate = new Date(time);
			const diff = targetDate - today;
			const diffDays = Math.round(diff / (1000 * 60 * 60 * 24));
			if (diffDays == 0) {
				return `今天`;
			} else if (diffDays == 1) {
				return '明天';
			} else if (diffDays == 2) {
				return '后天';
			} else {
				return `${targetDate.getMonth() + 1 < 10 ? '0' + (targetDate.getMonth() + 1) : targetDate.getMonth() + 1}-${targetDate.getDate()}`;
			}
		},
		async handleJoin() {
			await request(`/activities/joinActivity?activityId=${this.act.id}&userId=${this.userData.id}`, {}, 'POST');
			this.getActivityDetail(this.act.id);
		},
		async handleExit() {
			if (this.act.userVo.id == this.userData.id) {
				uni.showToast({
					title: '不能退出自己创建的活动',
					icon: 'none'
				});
				return;
			}
			await request(`/activities/quitActivity?activityId=${this.act.id}&userId=${this.userData.id}`, {}, 'DELETE');
			this.getActivityDetail(this.act.id);
			await request(`/activities/quitActivity?activityId=${this.act.id}&userId=${this.userData.id}`, {}, 'DELETE');
			this.getActivityDetail(this.act.id);
		},
		changeTab(index) {
			this.currentTab = index;
		},
		async handleGenerateReport() {
			this.generating = true;
			const res = await request(`/activities/generateReport?activityId=${this.act.id}`);
			console.log(res.data);
			this.generating = false;
			if (res.data.id) {
				this.boardgameReport = res.data;
			}
		},
		handleGoToReport() {
			uni.navigateTo({
				url: `/pages/Forum/PostPage?id=${this.boardgameReport.id}`
			});
		},
		// ------------ 评论区组件方法 ----------------
		async handleSubmitComment(comment) {
			let commentData = {
				...comment,
				type: 2 // 0: 帖子评论 1: 桌游评论 2:活动评论
			};
			await request('/comments/save', commentData, 'POST');
			this.handleInit();
		},
		async handleLike() {
			await request(
				`/forum/like`,
				{
					postsId: this.id,
					type: 2,
					operation: this.post.liked ? 0 : 1 // 0 取消点赞 1 点赞
				},
				'POST'
			);
			this.handleInit();
		},
		async handleCollect() {
			await request(
				`/forum/collect`,
				{
					postsId: this.id,
					operation: this.post.collected ? 0 : 1 // 0 取消点赞 1 点赞
				},
				'POST'
			);
			this.handleInit();
		},
		async handleDelete() {
			this.handleInit();
		}
	}
};
</script>

<style>
page {
	background-color: #f3f4f6;
}
</style>

<style lang="scss">
.activity-detail-container {
	color: #374151;
	font-size: 32rpx;

	.banner-wrapper {
		position: relative;
		width: 100%;
		height: 400rpx;
		max-height: 400rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
			}
		}

		view {
			position: absolute;
			bottom: 32rpx;
			left: 32rpx;
			font-size: 44rpx;
			font-weight: bold;
			letter-spacing: 2px;
			color: #fff;
			z-index: 10;
		}
	}

	.sponsor-wrapper {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 3px 9px #eee;

		.nickname {
			font-size: 32rpx;
			margin-right: 20rpx;
		}
	}

	.tab-wrapper {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 3px 9px #eee;
	}

	.activity-detail-wrapper {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 40rpx;
		font-size: 28rpx;

		.detail-item {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			.player-wrap {
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				flex: 1;

				.player-info {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.player-less {
						color: $theme-color;
					}
				}
			}
		}
	}

	.players-wrapper {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
		box-shadow: 0 3px 9px #eee;

		.players-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.players-list {
			display: flex;
			align-items: center;
			gap: 10rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
			}

			.more {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				background-color: #f3f4f6;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
			}
		}
	}

	.activity-intro-wrapper {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
		box-shadow: 0 3px 9px #eee;

		.activity-intro-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.activity-intro-content {
			font-size: 28rpx;
			color: #666;
		}
	}

	.activity-location-wrapper {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 40rpx;
		box-shadow: 0 3px 9px #eee;

		.activity-location-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.activity-location-map {
			width: 100%;
			height: 400rpx;
			border-radius: 25rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			.map {
				width: 100%;
				height: 100%;
			}
		}

		.activity-location-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;
			background-color: #fff8f3;
			border: solid 1px #f1780054;
			padding: 20rpx;
			border-radius: 25rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.join-button {
		margin: 40rpx 0;
	}
}

.activity-comment-wrapper {
	.generate-report-wrapper {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.comment-area {
		background-color: #fff;
	}
}

.boardgame-report-message {
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 40rpx 80rpx;

	.message-title {
		font-size: $font-size-large;
		color: #333;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
}
</style>
